<template>
  <div class="upload-page">
    <div class="container">
      <div class="upload-header">
        <h1>上传书籍</h1>
        <p>支持PDF、EPUB、TXT格式，最大100MB</p>
      </div>
      
      <div class="upload-form-container">
        <form @submit.prevent="handleUpload" class="upload-form">
          <div class="form-group">
            <label>选择文件</label>
            <div class="file-input-container">
              <input 
                type="file" 
                @change="handleFileSelect"
                accept=".pdf,.epub,.txt"
                class="file-input"
                id="file-input"
                required
              />
              <label for="file-input" class="file-input-label">
                <span v-if="selectedFile">{{ selectedFile.name }}</span>
                <span v-else>点击选择文件</span>
              </label>
            </div>
          </div>
          
          <div class="form-group">
            <label for="title">书名</label>
            <input 
              v-model="form.title"
              type="text"
              id="title"
              placeholder="请输入书名"
              class="input"
            />
          </div>
          
          <div class="form-group">
            <label for="author">作者</label>
            <input 
              v-model="form.author"
              type="text"
              id="author"
              placeholder="请输入作者"
              class="input"
            />
          </div>
          
          <div class="form-group">
            <label for="category">分类</label>
            <input 
              v-model="form.category"
              type="text"
              id="category"
              placeholder="请输入分类"
              class="input"
            />
          </div>
          
          <div class="form-actions">
            <button type="submit" class="btn btn-primary upload-btn" :disabled="uploading || !selectedFile">
              {{ uploading ? '上传中...' : '上传' }}
            </button>
            <router-link to="/library" class="btn">取消</router-link>
          </div>
        </form>
        
        <div v-if="uploadProgress > 0" class="upload-progress">
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: uploadProgress + '%' }"></div>
          </div>
          <p>上传进度: {{ uploadProgress }}%</p>
        </div>
        
        <div v-if="error" class="error-message">{{ error }}</div>
        <div v-if="success" class="success-message">{{ success }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useBookStore } from '@/stores/book'
import { useRouter } from 'vue-router'

const bookStore = useBookStore()
const router = useRouter()

const selectedFile = ref(null)
const form = ref({
  title: '',
  author: '',
  category: ''
})

const uploading = ref(false)
const uploadProgress = ref(0)
const error = ref('')
const success = ref('')

const handleFileSelect = (event) => {
  const file = event.target.files[0]
  if (file) {
    selectedFile.value = file
    
    // 如果没有输入书名，使用文件名
    if (!form.value.title) {
      form.value.title = file.name.replace(/\.[^/.]+$/, '')
    }
    
    error.value = ''
  }
}

const handleUpload = async () => {
  if (!selectedFile.value) {
    error.value = '请选择文件'
    return
  }
  
  uploading.value = true
  uploadProgress.value = 0
  error.value = ''
  success.value = ''
  
  try {
    const formData = new FormData()
    formData.append('file', selectedFile.value)
    
    if (form.value.title) formData.append('title', form.value.title)
    if (form.value.author) formData.append('author', form.value.author)
    if (form.value.category) formData.append('category', form.value.category)
    
    // 模拟上传进度
    const progressInterval = setInterval(() => {
      if (uploadProgress.value < 90) {
        uploadProgress.value += 10
      }
    }, 100)
    
    const result = await bookStore.uploadBook(formData)
    
    clearInterval(progressInterval)
    uploadProgress.value = 100
    
    if (result.success) {
      success.value = '上传成功！'
      
      // 重置表单
      selectedFile.value = null
      form.value = {
        title: '',
        author: '',
        category: ''
      }
      
      // 清空文件输入
      document.getElementById('file-input').value = ''
      
      setTimeout(() => {
        router.push('/library')
      }, 2000)
    } else {
      error.value = result.message
    }
  } catch (err) {
    error.value = '上传失败，请重试'
  } finally {
    uploading.value = false
  }
}
</script>

<style scoped>
.upload-page {
  min-height: 70vh;
}

.upload-header {
  text-align: center;
  padding: 40px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 40px;
}

.upload-header h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.upload-header p {
  color: var(--text-secondary);
  font-size: 16px;
}

.upload-form-container {
  max-width: 500px;
  margin: 0 auto;
}

.upload-form {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 30px;
  box-shadow: var(--shadow);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-primary);
}

.file-input-container {
  position: relative;
}

.file-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.file-input-label {
  display: block;
  padding: 40px 20px;
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  text-align: center;
  background: var(--surface-color);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
}

.file-input-label:hover {
  border-color: var(--primary-color);
  background: var(--background-color);
}

.file-input:focus + .file-input-label {
  border-color: var(--primary-color);
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
}

.upload-btn {
  min-width: 120px;
}

.upload-progress {
  margin-top: 20px;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--surface-color);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

.error-message {
  color: #dc3545;
  margin-top: 20px;
  padding: 15px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  text-align: center;
}

.success-message {
  color: #155724;
  margin-top: 20px;
  padding: 15px;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  text-align: center;
}

@media (max-width: 768px) {
  .upload-form-container {
    margin: 0 15px;
  }
  
  .upload-form {
    padding: 20px;
  }
  
  .form-actions {
    flex-direction: column;
  }
}
</style>